<template>
  <div>
    <!----商品信息表格----->
  <el-table
    :data="goods.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    style="width: 100%"
    class="good-table"
    max-height="55vh"
    height="55vh"
    :row-class-name="goodTableRowName"
    @selection-change="handleSelectionChange">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品条码:">
            <span>{{ props.row.good.barcode }}</span>
          </el-form-item>
          <el-form-item label="单位:">
            <span>{{ props.row.good.uid }}</span>
          </el-form-item>
          <el-form-item label="类别:">
            <span>{{ props.row.good.kid }}</span>
          </el-form-item>
          <el-form-item label="规格:">
            <span>{{ props.row.good.specification }}</span>
          </el-form-item>
          <el-form-item label="厂商:">
            <span>{{ props.row.good.manufacturer }}</span>
          </el-form-item>
          <el-form-item label="保质期:">
            <span>{{ props.row.good.expiration_date }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品状态">
      <template slot-scope="scope">
        <el-tag
          type="info"
          v-for="tag in scope.row.tagsList"
          :key="tag.str"
          >{{tag.str}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="good.name">
    </el-table-column>
    <el-table-column
      label="进价"
      prop="good.cost">
    </el-table-column>
    <el-table-column
      label="售价"
      prop="good.price">
    </el-table-column>
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="操作"
      style="width: 5vw">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="goodChange(scope.$index, scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5, 10, 20, 40]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="goods.length">
  </el-pagination>
  </div>
</template>

<script>
    export default {
      name: "GoodsTable",
      props:['goodChange','goods'],
      data() {
        return {
          currentPage:1, //初始页
          pagesize:5,    //    每页的数据
          //goods:[],
        }
      },
      mounted:function () {
            //this.loadGoods();
      },
      methods:{
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
          console.log(this.currentPage)  //点击第几页
        },
        goodTableRowName({row, rowIndex}){
            if(row.good.state==1){
              //console.log(JSON.stringify(row))
              return 'disable-good'
            }
            return ''
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          console.log(JSON.stringify(this.multipleSelection))
        },
        selected_kinds(){
          var barcodes= []
          for(var i=0;i<this.multipleSelection.length;i++){
            barcodes.push(this.multipleSelection[i].good.barcode)
          }
          return barcodes
        }
      },
    }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<style>
  .good-table .disable-good{
    background: red;
  }
</style>
